@extends('layouts.agent')
@section('content')
    <style>
        .goods-pic{display:inline-block;position:relative;margin-right:10px;}
        .goods-pic img{max-height:100px;}
        .del{display:none;position:absolute;bottom:0;left:0;z-index:1;background:rgba(100,100,100,0.8);color:#fff;cursor:pointer;width:100%;text-align:center;}
        .attr-row{padding-bottom:10px;margin-bottom:15px;border-bottom:1px solid #ddd;}
        .attr-row .row{margin-bottom:10px}
        .attr-row input{width:150px;display:inline-block;margin-left:10px;}
        .attr-row label, .attr-row .btn{margin-left:10px;}
    </style>
    <script src="{{URL::asset('js/ajaxfileupload.js')}}"></script>
    <div id="ribbon"><ol class="breadcrumb"><li>内容区</li></ol></div>
    <div class="content_wrapper">
        <aside>
            <header><i class="fa fa-fw fa-file"></i>添加商品</header>
            <section>
                <div class="row">
                    <div class="col-sm-12">
                        <form id="dataForm" onsubmit="return false;" class="form-horizontal" role="form">
                            <input type="hidden" name="id" value="{{$row['id']}}">
                            <input type="hidden" name="pic" id="pic_val" value="{{$row['pic']}}">
                            <div class="form-group">
                                <label class="col-sm-2 control-label"><span class="red">*</span>所属供应商</label>
                                <div class="col-sm-3">
                                    <select name="supplier_id" class="form-control">
                                        @foreach($suppliers as $k => $v)
                                            <option value="{{$k}}" {{$row['supplier_id'] == $k ? 'selected' : ''}}>{{$v}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <hr/>
                            <div class="form-group">
                                <label class="col-sm-2 control-label"><span class="red">*</span>商品分类</label>
                                <div class="col-sm-3">
                                    <select name="cate_id" class="form-control">
                                        @foreach($cateNames as $k => $v)
                                            <option value="{{$k}}" {{$row['cate_id'] == $k ? 'selected' : ''}}>{{$v}}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-sm-3 help-block">
                                    <a href="{{url('agent/cate/add')}}">+去添加分类</a>
                                </div>
                            </div>
                            <hr/>
                            <div class="form-group">
                                <label class="col-sm-2 control-label"><span class="red">*</span>商品名</label>
                                <div class="col-sm-3">
                                    <input type="text" name="name" value="{{$row['name']}}" class="form-control" maxlength="20">
                                </div>
                            </div>
                            <hr/>
                            <div class="form-group">
                                <label class="col-sm-2 control-label"><span class="red">*</span>商品图片集</label>
                                <div class="col-sm-10 goods-pic-wrapper" style="height:120px">
                                    <button type="button" id="show-upload" class="btn btn-success btn-sm">添加图片</button>
                                </div>
                            </div>
                            <hr/>
                            <div class="form-group">
                                <label class="col-sm-2 control-label"><span class="red">*</span>成本价</label>
                                <div class="col-sm-3">
                                    <input type="text" name="cost" value="{{$row['cost']}}" class="form-control" maxlength="8">
                                </div>
                            </div>
                            <hr/>
                            <div class="form-group">
                                <label class="col-sm-2 control-label"><span class="red">*</span>原价</label>
                                <div class="col-sm-3">
                                    <input type="text" name="origin_price" value="{{$row['origin_price']}}" class="form-control" maxlength="8">
                                </div>
                            </div>
                            <hr/>
                            <div class="form-group">
                                <label class="col-sm-2 control-label"><span class="red">*</span>现价</label>
                                <div class="col-sm-3">
                                    <input type="text" name="price" value="{{$row['price']}}" class="form-control" maxlength="8">
                                </div>
                            </div>
                            <hr/>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">序号</label>
                                <div class="col-sm-3">
                                    <input type="number" name="order_num" value="{{$row['order_num']}}" class="form-control" maxlength="20">
                                </div>
                                <div class="col-sm-3 help-block red">
                                    *序号越大越靠前
                                </div>
                            </div>
                            <hr/>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">首页展示</label>
                                <div class="col-sm-3">
                                    <select name="is_home" class="form-control">
                                        @foreach(\App\Model\Cate::$isHomeLabels as $k => $v)
                                            <option value="{{$k}}" {{$row['is_home'] == $k ? 'selected' : ''}}>{{$v}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <hr/>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">商品规格</label>
                                <div class="col-sm-8">
                                    @foreach($attr as $parentName => $list)
                                        <div class="attr-row">
                                            <div class="row">
                                                <label class="control-label">规格名:</label>
                                                <input type="text" class="form-control attr-title" name="parentName" value="{{$parentName}}">
                                                <button type="button" onclick="$(this).parents('.attr-row').remove()" class="btn btn-danger btn-sm">删除规格</button>
                                                <a type="button" onclick="addSubAttr(this)" class="btn btn-primary btn-sm">+添加属性</a>
                                            </div>
                                            @foreach($list as $attrRow)
                                                <div class="row">
                                                    <div class="col-sm-1"></div>
                                                    <label class="control-label">属性:</label>
                                                    <input type="text" class="form-control attr-name" name="attr-name" value="{{$attrRow['name']}}">
                                                    <button type="button" class="btn btn-danger btn-sm" onclick="$(this).parent().remove()">删除</button>
                                                </div>
                                            @endforeach
                                        </div>
                                    @endforeach
                                    <a type="button" onclick="addAttr(this)" class="btn btn-primary btn-sm">+添加规格</a>
                                </div>
                            </div>
                            <hr/>
                            <div class="form-group">
                                <label class="col-sm-2 control-label"><span class="red">*</span>商品详情</label>
                                <div class="col-sm-5" style="position: relative">
                                    <textarea id="text_content" name="detail" style="width:800px;height:300px;">{{$row['detail']}}</textarea>
                                </div>
                            </div>
                            <hr/>
                            <div class="form-group">
                                <label class="col-sm-2 control-label"> </label>
                                <div class=" col-sm-10">
                                    <input type="button" class="btn btn-primary" value="保存" id="saveBtn" onclick="save()" />&nbsp;&nbsp;&nbsp;
                                    <input type="button" class="btn btn-default" value="返回" onclick="history.go(-1)" />
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </section>
        </aside>
    </div>

    <!-- 上传图片开始 -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog modal-sm" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">上传图片</h4>
                </div>
                <div class="modal-body">
                    <input type="file" name="picture" id="picture">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" onclick="uploadImage('picture')">上传</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                </div>
            </div>
        </div>
    </div>
    <!-- 上传图片结束 -->

    <!-- 富文本编辑器开始 -->
    <script type="text/javascript" src="{{asset('vendor/ueditor/ueditor.config.js')}}"></script>
    <script type="text/javascript" src="{{asset('vendor/ueditor/ueditor.all.js')}}"></script>
    <script type="text/javascript">UE.getEditor('text_content');</script>
    <!-- 富文本编辑器结束 -->

    <script>
        function save() {
            // 图片
            var picArr = [];
            $('.goods-pic').each(function () {
                picArr.push($(this).children('img').attr('src'));
            });

            // 属性
            var attrData = {};
            for (var i = 0; i < $('.attr-row').length; i++) {
                var attrRow = [];
                for (var j = 0; j < $('.attr-row').eq(i).children().find('.attr-name').length; j++) {
                    if (!$('.attr-row').eq(i).children().find('.attr-name').eq(j).val()) continue;
                    attrRow.push({
                        name: $('.attr-row').eq(i).children().find('.attr-name').eq(j).val(),
                    });
                }
                if ($('.attr-title').eq(i).val() && attrRow.length > 0)
                    attrData[$('.attr-title').eq(i).val()] = attrRow;
            }

            $.post('{{url('agent/goods/edit')}}', {
                id: $('input[name="id"]').val(),
                pic: picArr.join(','),
                supplier_id: $('select[name="supplier_id"]').val(),
                cate_id: $('select[name="cate_id"]').val(),
                name: $('input[name="name"]').val(),
                cost: $('input[name="cost"]').val(),
                origin_price: $('input[name="origin_price"]').val(),
                price: $('input[name="price"]').val(),
                detail: $('textarea[name="detail"]').val(),
                order_num: $('input[name="order_num"]').val(),
                is_home: $('select[name="is_home"]').val(),
                attr: attrData
            }, function (res) {
                if (res.status === 1) {
                    layer.msg(res.info, {icon: res.status}, function () {
                        location.href=document.referrer;
                    });
                } else {
                    layer.msg(res.info, {icon: res.status});
                }
            });
        }

        $(function () {
            $('#show-upload').click(function () {
                if ($('.goods-pic').length >= 5) {
                    layer.msg('最多添加5张图片', {icon: 2});
                    return;
                }
                $('#myModal').modal('show');
            });

            // 渲染图片
            var picStr = '{{$row['pic']}}';
            var picArr = picStr.split(',');
            for (var i = 0; i < picArr.length; i++) {
                showPic(picArr[i]);
            }
        });

        // 添加规格
        function addAttr(obj) {
            var htmlContent = '<div class="attr-row">\
                <div class="row">\
                    <label class="control-label">规格名:</label>\
                    <input type="text" class="form-control attr-title" name="parentName">\
                    <button type="button" onclick="$(this).parents(\'.attr-row\').remove()" class="btn btn-danger btn-sm">删除规格</button>\
                    <a type="button" onclick="addSubAttr(this)" class="btn btn-primary btn-sm">+添加属性</a>\
                </div>\
                </div>';
            $(obj).before(htmlContent);
        }

        // 添加属性
        function addSubAttr(obj) {
            var htmlContent = '<div class="row">\
                <div class="col-sm-1"></div>\
                <label class="control-label">属性:</label>\
                <input type="text" class="form-control attr-name" name="attr-name">\
                <button type="button" class="btn btn-danger btn-sm" onclick="$(this).parent().remove()">删除</button>\
                </div>';
            $(obj).parents('.attr-row').append(htmlContent);
        }

        // 上传图片
        function uploadImage(elementId) {
            if (document.getElementById(elementId).files.length === 0) {
                layer.msg('您还未选择图片', {icon: 2});
                return;
            }

            $.ajaxFileUpload({
                fileElementId: elementId,
                url: '{{url('api/upload/image')}}',
                type: 'post',
                dataType: 'json',
                secureuri: false, // 是否启用安全提交，默认为false。
                async : true,
                success: function(res) {
                    if (res.status === 1) {
                        $('#myModal').modal('hide');
                        showPic(res.info);
                    } else {
                        layer.msg(res.info, {icon: 2});
                    }
                },
                error: function(data, status, e) {
                    layer.msg(e, {icon: 2});
                }
            });
        }

        // 显示图片
        function showPic(url) {
            var picHtml = '<div class="goods-pic" onmouseover="$(this).children(\'.del\').show()" onmouseout="$(this).children(\'.del\').hide()">';
            picHtml += '<img src="' + url + '">';
            picHtml += '<div class="del" onclick="$(this).parent(\'.goods-pic\').remove()">删 除</div></div>';
            $('#show-upload').before(picHtml);
        }
    </script>
@endsection